<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中有2种绑定的方法:
        1. 单向绑定(v-bind:): 数据只能从data流向页面.
        2. 双向绑定(v-model:): 数据不仅能从data流向页面,还可以从页面流向data
            备注:
            1. 双向绑定一般都应用在表单元素上(如:input/select等)
            2. `v-model:vlaue` 可以简写为 `v-model`,因为v-model默认收集的是value值
     -->
    <div id="root">
        <h1>普通写法</h1>
        单向数据绑定:<input type="text" v-bind:value="name"><br />
        双向数据板顶:<input type="text" v-model:value="name"><br />
        <h1>简写</h1>
        单向数据绑定:<input type="text" :value="name"><br />
        双向数据板顶:<input type="text" v-model="name"><br />
        <h2 v-bind:x="name">v-bind 绑定属性x生效</h2>
        <!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 -->
        <!-- <h2 v-model:x="name">v-model 绑定属性x不生效</h2> -->
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    new Vue({
        el: '#root',
        data: {
            // Vue.js devtools在data中某个属性值只为中文时显示有些bug(不显示),但是不影响程序正常运行
            name: '尚硅谷123'
        }
    });
</script>

</html>